<template>
  <!-- 查询模式选择 -->
  <div class="query-mode">
    <div class="query-mode-title">&nbsp;&nbsp;&nbsp;&nbsp;查询模式选择</div>

    <div class="query-mode-item" v-for="item in queryItems">
      <i :class="['iconfont', item.icon, { 'item-active': item.active }]"></i>
      <button
        class="query-mode-btn"
        :class="{ 'item-active': item.active }"
        @click="chooseQueryItem(item)"
      >
        {{ item.title }}
      </button>
    </div>
  </div>
  <!-- 路径规划面板 -->
  <RouteDesign v-if="isInRouteDesign" />
  <!-- 站控措施 -->
  <div class="station-solutions" v-if="isStationSolutionsClicked">
    <div class="station-solutions-title">
      &nbsp;&nbsp;&nbsp;&nbsp;图标&nbsp;&nbsp;站控措施
    </div>
    <div class="station-solutions-item" v-for="item in station_solutions">
      <i :class="['iconfont', item.iconName]"></i>
      <button class="station-solutions-btn">{{ item.title }}</button>
    </div>
  </div>
</template>
<script setup>
import { useLineData,useMeasureData } from '@/store';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { flyToDefaultView, renderAll, removeByCacheData, removeAll, changeDisplayBillBoard,renderHeat } from '@/cesiumTools/controller/effectController';
import { controlAll, chooseLine } from '@/cesiumTools/controller/lineController.js';

//查询模式和站控措施
import { stationMangeItems, station_solutions } from '@/store/staticData';
import RouteDesign from '@/components/RouteDesign.vue';
let removeHeat;
const queryItems = ref(stationMangeItems);
const stationSolutionsArr = ref(station_solutions);
const lineData = useLineData();
const measureDataStore=useMeasureData()
const subLineData = ref(lineData.lineData);
const viewer = lineData.viewer;
const queryWay = ref('');

//判断路径规划是否点击
const isInRouteDesign = ref(false);
//判断站控措施是否点击
const isStationSolutionsClicked = ref(false);

// 点击查询方式，改变查询的数据以及效果
const chooseQueryItem = item => {
  // handleAllLineChecked()

  // // 暂时禁用全局管理，unMount的时候打开
  // lineData.disableController(true)

  isStationSolutionsClicked.value = false;
  //取消路径规划
  isInRouteDesign.value = false;
  //清除站控措施
  measureDataStore.clearData()
  //移除热力图
  removeHeat && removeHeat();
  // 处理地图效果
  handleEffect(item.title);
  // 处理ui
  queryItems.value = queryItems.value.map(n => {
    if (n.id === item.id) {
      n.active = true;
      queryWay.value = item.title;
    } else {
      n.active = false;
    }
    return n;
  });
};

//控制全部显示或者隐藏
const handleAllLineChecked = () => {
  //为true时显示所有线路和popup，为false时隐藏所有线路和popup
  controlAll(false, subLineData);
  let names = [];
  subLineData.value.forEach(line => {
    const { stationsList } = line;
    //console.log(stationsList)
    stationsList.forEach(station => {
      names.push(station.name);
    });
  });
  //console.log(names);
  //changeDisplayBillBoard(names, false);
};

// 根据查询方式处理效果
const handleEffect = title => {
  switch (title) {
    case '站点拥挤度':
      renderClowed();
      break;
    case '周边查询':
      break;
    case '路径规划':
    isInRouteDesign.value=true
      break;
    default:
      isStationSolutionsClicked.value = true;
      console.log('站控措施');
      renderStationMeasure()
      break;
  }
};

// 站点拥挤度逻辑,点击展示热力图，表现各个站点的拥挤程度
const renderClowed = () => {
  // 解析线路拥挤度数据
  const dataSource = [];
  // 清除当前底图，然后添加arcgis底图
  subLineData.value.forEach(item => {
    const { stationsList } = item;
    stationsList.forEach(s => {
      const { position } = s;
      dataSource.push({
        x: position.lng,
        y: position.lat,
        value: Math.ceil(Math.random() * 1000),
      });
    });
  });
  removeHeat = renderHeat(viewer, dataSource);
};

// 渲染站控措施
const renderStationMeasure=()=>{
    function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
  }

  // 从数组中随机取几个数
  const getRandomArrayValue = (arr, num) => {
    var sData = arr.slice(0), i = arr.length, min = i - num, item, index;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      item = sData[index];
      sData[index] = sData[i];
      sData[i] = item;
    }
    return sData.slice(min);
  }

  const resultData=[]
  lineData.allData.forEach(item => {
    const { stationsList, color } = item;
    const result = stationsList.map(s => {
      // 0-5个站控措施
      const measureNum = getRandomIntInclusive(0, 5)
      let measures = getRandomArrayValue(station_solutions, measureNum)
      s.measures = measures
      s.color = color
      return {
        name:s.name,
        measures
      }
    })
    resultData.push(result)
  })
  // 全局共享站控措施数据
  measureDataStore.setData(resultData)
}
//未实现:站点周边搜索
//组件销毁时,移除热力图
onBeforeUnmount(()=>{
    //移除热力图
    removeHeat && removeHeat();
    queryItems.value = queryItems.value.map(n => {
      n.active = false
    });
})
</script>
<style scoped lang="scss">
.query-mode {
  position: absolute;
  top: 5%;
  left: 10%;
  z-index: 1021;
  color: white;
  font-size: 16px;
  .query-mode-item {
    position: relative;
    margin-top: 20px;
    i,
    .query-mode-btn {
      margin-left: 20px;
      padding: 5px 5px;
      background: transparent;
      border: 2px solid rgb(46, 137, 143);
      border-radius: 0 10px;
      cursor: pointer;
    }
    &::before {
      content: '';
      position: absolute;
      left: 36%;
      width: 0;
      height: 52px;
      border: 1px solid white;
    }
    &::after {
      content: '';
      position: absolute;
      left: 37%;
      top: 50%;
      width: 10px;
      height: 0;
      border: 1px solid white;
    }
  }
}
.station-solutions {
  position: absolute;
  top: 5%;
  right: 10%;
  z-index: 1021;
  color: white;
  font-size: 16px;
  .station-solutions-item {
    position: relative;
    margin-top: 20px;
    i,
    .station-solutions-btn {
      margin-left: 20px;
      padding: 5px 5px;
      background: transparent;
      border: 2px solid rgb(46, 137, 143);
      border-radius: 0 10px;
      cursor: pointer;
    }
    &::before {
      content: '';
      position: absolute;
      left: 23%;
      top: 50%;
      width: 20px;
      height: 0;
      border: 1px solid white;
    }
  }
}
.item-active {
  background: rgba(46, 137, 143, 0.8) !important;
}
</style>
